<script setup>
import { ref } from "vue";
import { Picture as IconPicture } from "@element-plus/icons-vue";
const props = defineProps(["url", "productName", "price"]);
</script>

<template>
  <el-card class="product-card">
    <div class="image-container">
      <el-image
        :src="props.url"
        fit="contain"
        style="width: 100%; height: 100%"
      >
        <template #error>
          <div class="image-placeholder">
            <el-icon><icon-picture /></el-icon>
          </div>
        </template>
      </el-image>
    </div>
    <div class="product-info">
      <div class="product-name">
        <!-- 去掉了多余的静态文本，仅保留动态内容 -->
        <span>{{ props.productName }}</span>
      </div>
      <div class="product-price">￥{{ props.price }}</div>
    </div>
  </el-card>
</template>

<style scoped>
::v-deep(.el-card__body) {
  padding: 15px;
  margin: 0; /* 移除默认margin避免影响高度计算 */
}

.product-card {
  width: 100%;
  height: 260px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  border-radius: 8px;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.image-container {
  width: 100%;
  height: 150px;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
}

.image-placeholder .el-icon {
  font-size: 48px;
  opacity: 0.6;
}

.product-info {
  padding: 10px 0 10px;
  display: flex;
  flex-direction: column;

  flex: 1; /* 占满剩余空间，确保名称有足够显示区域 */
}

.product-name {
  font-size: 13px;
  color: var(--el-text-color-primary);
  /* 关键：给容器设置足够容纳两行的高度 */
  height: 40px; /* 2行 × line-height: 1.5 → 约20px/行 */
}

/* 修正选择器：使用标签选择器而非类选择器（因为span没有加class） */
.product-name span {
  /* 移除错误的max-width限制，避免文本被过度压缩 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制2行 */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5; /* 行高适中，确保2行高度匹配容器 */
  height: 100%; /* 继承父容器高度，确保截断生效 */
}

.product-price {
  font-size: 16px;
  font-weight: 500;
  color: #f56c6c;
  margin-top: auto; /* 价格靠下对齐 */
}
</style>
